###
Color values to sync with CSS
###
val_color  = "rgb(  96, 96, 96)"
dark_color = "rgb( 0,160,255)"

### GLOBALS =============== ###
$ = jQuery

### Generates a canvas element with a pie chart
	using data-val attribute on element
###
piechart = ( el_id)->
	el = document.getElementById el_id

	# Creating context
	can = document.createElement('canvas')
	can.width  = 100
	can.height = 100
	el.appendChild( can)
	ctx = can.getContext('2d')

	# drawing values
	radius = 50
	start  = radius
	full_color = dark_color
	val_color  = val_color
	data = el.dataset.val

	# Drawing whole circle
	ctx.fillStyle = ctx.strokeStyle = full_color
	ctx.beginPath()
	ctx.arc( start,start,radius, Math.PI*2,0,0,false)
	ctx.fill()

	# Drawing percentage
	ctx.fillStyle = ctx.strokeStyle = val_color
	ctx.moveTo( start,start)
	ctx.beginPath()
	ctx.lineTo( start,radius)
	endAngle = (Math.PI*data)/100
	ctx.arc( start,start, radius ,endAngle,0,0,false)
	ctx.lineTo( start,start)
	ctx.fill()

###
Button navigation
currentPage = "vols"

$('#moss_return').on 'click',(e)->
	if currentPage == "detailVol"
		if $('.card').hasClass('active')
			$('.data, .card').removeClass('active')

		currentPage = "compteRenduVol"
		$('#edit_panel').css('width','0%')
		$('#flight_widgets_container').css('width','100%')
		$('#validate').hide()
	else if currentPage == "listeCRME"
		$('#edit_panel').toggleClass('folded')
		currentPage = "detailVol"
	else
		$('#edit_crme_list_members').show()
###

	#else
    #    crvapp.crvaDetails.getBackToDashboard();

###
$('#unfold').on 'click',(e)->
	if $(this).hasClass( 'unfolded')
		$('#crva_list_container').hide()
		$(this).removeClass('unfolded')
	else
		$(this).toggleClass('unfolded')
		$('#crva_list_container').show()
###	


###
Controls view presentation
###
$('.card').on 'click',(e)->
	if !$(this).hasClass('active')
		# setting other cards' style
		$('.card').removeClass('active')
		$(this).addClass('active')
		# now we remove other card's active data field
		$('.data').not( $(this).find('.data')).removeClass('active')
		# then we position vertically at a nice place
		# $('html').scrollTop( $(this).offset().top - 103)
		# show validate button
		# TODO: show only if data is modified by user
		$('#validate').show()
		# DEMO: show corresponding data in edit_panel
		$('.demo_slide').hide()
		$('#'+this.dataset.demo).show()
	# load data into the edit card
	crvapp.crvaDetails.loadValuesForEdit()
###
	if !$('#edit_panel').hasClass('edit_mode')
		# display edit panel !
		$('#cards_container, #edit_panel').addClass('edit_mode')
		$('html').scrollTop( $(this).offset().top - 103)
		$('#edit_panel').scrollTop( 0)

	w1 = $('.card').width() + 92;
	w2 =  $(document).width() - w1 - 50  ;
	$('#flight_widgets_container').css('width', w1);
	$('#edit_panel').css('width', w2);  
	currentPage = "detailVol"
	# don't tell html thanks
	e.stopPropagation()
###

###
When a user clicks away, he means to stop edition
###
#$('html').on 'click',(e)->
#	# reset card looks
#	if $('.card').hasClass('active')
#		$('.data, .card').removeClass('active')
#
#	currentPage = "compteRenduVol"
#	$('#edit_panel').css('width','0%')
#	$('#flight_widgets_container').css('width','100%')
#	$('#validate').hide()
#	### reset dashboard
#	if $('#edit_panel').hasClass('edit_mode')
#		$('#cards_container, #edit_panel').removeClass('edit_mode')
#		$('html').scrollTop( 0)
#		$('#validate').hide()###

###
Clicking on a field activates input styles and focus
TODO: apply fade style to other cards
###
$('.data').on 'click',(e)->
	# highlighting styles
	if !$(this).hasClass('active')
		$('.data').removeClass('active')
		$(this).addClass('active')
		# label
		$('.label, .edit_section .title').removeClass('selected')
		# locate label in edit panel and set style
		labelPos = 0
		for i, index in $('.edit_section .title')
			if $(this).prev('.label').html() == $(i).html()
				$(i).addClass('selected')
				labelPos = $(i).offset().top
		# display it nicely
		$('#edit_panel').scrollTop( labelPos)


###
Edit mode control
###
$('#edit_panel').on 'click',(e)->
	e.stopPropagation()

	###
# just for demo
$('#demo_text_editor').on 'click', ()->
	# toggle
	$(this).hide()
	$(this).next('input').show().focus()
	


$('#demo_text_editor_input').on 'blur', ()->
	# update sibling
	$(this).hide()
	newvalue =  $(this).val()
	if newvalue != ''
		$(this).prev('.type_text').text( newvalue)
	$(this).prev('.type_text').show()
###


### TODO: end input on pressing enter key
$('#demo_text_editor_input').on 'keypress', (e)->
	code = e.keyCode || e.which
	console.log code
###

###
multi pick list type
###
$('.type_list.multi').find('tr').on 'click',(e)->
	$(this).toggleClass('active')

###
single pick list type
###
$('.type_list').find('tr').on 'click',(e)->
	if !$(this).parents().hasClass('multi')
		$(this).parent().find('tr').removeClass('active')
		$(this).toggleClass('active')

###
Simple spinner.
uses datasets on input fields to manage value:
@param data-max max acceptable value
@param data-rel button's target input field to store value
TODO: refactor and OOP
###
timespinner  = ()->
	# attach click listener on buttons
	$('.timespinner .up').on 'click', (e)->
		spin_up(e,this)
	$('.timespinner .down').on 'click', (e)->
		spin_down(e,this)
	$('.timespinner input').on 'blur', (e)->
		timespinnercheck( this)
	$('.timespinner input').on 'focus', (e)->
		if this.value == "0"
			this.value = ""

spin_up = ( ev, div)->
	tar = $(div.dataset.rel)
	max = parseInt(div.dataset.max)
	cur = parseInt( tar.val())
	if cur < max && cur >= 0
		cur += 1
	else
		cur = 0
	tar.val( cur)

spin_down = ( ev, div)->
	tar = $(div.dataset.rel)
	max = parseInt(div.dataset.max)
	cur = parseInt( tar.val())
	if cur <= max && cur >= 1
		cur -= 1
	else
		cur = max
	tar.val( cur)

timespinnercheck = (div)->
	if div.value == '' || div.value > div.dataset.max || div.value < 0
		div.value = 0


###
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
								CRME
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
###
###
$('#members_list_table').on 'click',(e)->
	# get state from this
	if !$('#flight_widgets_container').hasClass('folded')
		# state machine
		currentPage = "listeCRME"
	else
		$('#edit_panel #crme_header').html('')
	$('.master_layout').toggleClass('folded')
###



	

#------------------------------------------------------------------------

timespinner()

# setRequestedCharts()
piechart 'global_flights_chart'
piechart 'piechart2'
piechart 'piechart3'
piechart 'piechart4'
piechart 'piechart5'
piechart 'piechart6'
# piechart 'flight_hours_1'
# piechart 'flight_hours_2'

